<template>
  <guide :guideObj="{title: config.configType}" @backHome="backHome">
    <el-popover
      placement="bottom"
      width="180"
      slot="button"
      v-model="visible2"
    >
      <p class="popover">因简单版设置里暂时没有该项配置，需要切换到旧版设置进行配置。旧版设置该项的位置在【设置】-【】</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
        <el-button type="primary" size="mini" @click.stop="jumpToConfig">切换</el-button>
      </div>
      <button type="button" slot="reference" class="el-button primary_btn" >我要自己配</button>
    </el-popover>
    <div slot="warn" class="description">
      温馨提示：
      <ul>
        <li>1.为了不影响您的业务，以及节省您的时间，售后人员将为您免费提供配置服务，只需填写下方的申请配置内容，点击提交，售后人员收到申请后会按照您的要求完成配置服务。
        </li>
        <li>2.您可以点击顶部工具条【?】里的【服务工单】查看您所有的配置申请的动态并进行回复。注意：工作时间为9:00——18:00，非工作时间不进行配置，如需紧急支持请拨打客服热线：4001-113-114。
        </li>
      </ul>
    </div>
    <div slot="directions" class="description">
      <p>
        企业如果想对在线的消息自己先做一遍处理，然后再流给七陌云客服平台，则可以通过接口对接的形式，达到客服服务的目的
      </p>
    </div>
    <el-row slot="application" :gutter="20">
      <el-col :span="12">
        <business-form :config="config" :cssStyle="{row: 16, placeHolder: '小提示:详细对接的需求可在此简单描述下，我们将会有专门的工作人员联系您进行对接。'}" ref="businessForm" @backHome="backHome"></business-form>
      </el-col>
    </el-row>
  </guide>
</template>

<script>
  import Guide from '../../../ui-modules/guide/index'
  import BusinessForm from './businessCommon'
  import Clipboard from 'clipboard-js'
  import {isHasMenu} from '@/utils/m7Utils'
  export default {
    name: 'qualitycheckHelp',
    data () {
      return {
        visible2: false
      }
    },
    props: {
      config: Object
    },
    components: {
      Guide,
      BusinessForm
    },
    activated () {
      this.$refs.businessForm.resetForm()
    },
    inject: ['back'],
    methods: {
      copyText () {
        let self = this
        Clipboard.copy(document.getElementById('qualitycheck-copy').innerText).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      backHome () {
        this.back()
      },
      jumpToConfig () {
        this.visible2 = false
        if (isHasMenu('im_docking_config', this.$store.state.session.user)) {
          this.$router.push({path: '/index/config', query: {active: 'channelConfig', subActive: 'channelConfigwebChatUrl'}})
        } else {
          this.$message.error('您没有权限跳转到在线对接设置，请联系管理员开通权限')
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "../../../../assets/common.styl"
  .description
    p
      padding 10px 0
    ul
      padding 10px 0
    ul ul
      padding 10px 0 10px 40px
    li
      display list-item
      margin:0
  .business-flow-example
    position relative
    margin: 20px auto 0
    padding 10px 30px
    background: #fafafa
    .copyText
      position absolute
      right 20px
      top 15px
      cursor pointer
    li
      padding 2px 0
  .icon-fuzhi
    color $c-main
  .popover
    padding 5px
  img
    max-width 100%
    width auto
    border 10px solid #f7f7f7
    margin-bottom 20px
</style>

